Annotate prototypes for web accessibility 5大網頁無障礙設計方法

1 註釋（Annotations）：告訴開發者頁面元素的「閱讀順序」

註釋是在你的設計圖中，用文字或編號標明頁面中每一個互動元素（比如按鈕、輸入框）的順序和功能。這些資訊是給前端開發者看的，幫助他們正確設定「焦點順序」和鍵盤導航功能。

盲人或低視力使用者會使用螢幕閱讀器來聽網頁內容。註釋可以告訴開發者：這些按鈕、連結的閱讀順序應該是怎樣的。比如，填寫表單時，從上到下按 Tab 鍵切換時的順序就是根據這個順序來的。

怎麼做？

在 Figma 或你用的設計軟體中：

  1. 在每個按鈕或輸入框旁邊放一個圓圈。
  1. 用數字表示使用者點選 Tab 鍵時應該跳轉到的順序（比如 1、2、3）。
  1. 用文字簡單說明這個按鈕是幹嘛的（比如「提交表單按鈕」、「搜尋輸入框」）。
  1. 這些註釋可以用綠色或灰色標記，方便識別。

2 層級標題（Heading Hierarchy）：像寫作文一樣給內容分主次

層級標題就是你網頁中的大標題、小標題、次級標題等等，它們是按照 H1、H2、H3 等級別來區分的。

對於使用螢幕閱讀器的使用者來說，他們可以透過 H1、H2、H3 的層級，快速瞭解網頁結構和內容重點。如果不使用層級標題，他們可能會聽到一大堆內容卻不知道哪裡是重點。

怎麼做？

  1. 為每一塊內容設定一個合適的標題層級。
    • 網頁主標題用 H1（每頁只能有一個 H1）
    • 子欄目或部分的標題用 H2
    • H2 下再細分的內容用 H3
  1. 在你的設計中標註出來（例如：在文字旁邊用「H1」、「H2」等註釋）
  1. 告訴開發者這些地方應該用對應的 HTML 標籤（H1～H6）

小貼士：層級清晰不僅有助於可訪問性，也能讓網頁更有條理、更美觀！

3 標籤（Labels）：給按鈕和輸入框加上「自我介紹」

標籤是對網頁中的按鈕、輸入框、圖示等互動元素所做的文字說明，是為了讓使用者（特別是使用輔助裝置的人）知道這些元素是幹嘛的。

對於盲人來說，螢幕閱讀器只會讀取按鈕的名稱，不會告訴他們視覺上的樣式。如果你沒有為按鈕加上清楚的標籤，他們就不知道點選這個按鈕會發生什麼。

怎麼做？

  1. 給所有互動元素寫清楚的說明，比如：
    • 搜尋框 → Label: “請輸入關鍵詞”
    • 提交按鈕 → Label: “提交訂單”
    • Gmail 裡的「撰寫郵件」按鈕 → Label: “撰寫”（型別：按鈕）
  1. 如果有一組相關的控制元件，比如核取方塊、單選框，要說明它們屬於同一組。
    • 比如：“興趣愛好”下的核取方塊：電影、音樂、運動
  1. 用註釋的形式標註這些標籤在設計圖裡，方便開發人員新增到 HTML 裡。

4 色彩與對比度（Color and Contrast）

簡單來說就是：文字和背景的顏色對比夠不夠強，能不能清楚地看清文字。

使用對比強的顏色組合：深色背景 + 淺色文字、淺色背景 + 深色文字

避免以下組合：淺灰 + 白（太相近）、紅 + 綠（色盲使用者無法分辨）

https://webaim.org/resources/contrastchecker/

https://www.w3.org/WAI/standards-guidelines/wcag/

5 響應式網頁也要無障礙（Responsive + Accessible）

當使用者放大頁面或用大字號瀏覽時，網頁的內容不能重疊、錯位或變形。

在Figma裡建立兩個版本的Mockup：正常檢視、放大後的檢視（Zoom到150%）確保內容會自動重新排布，圖文不重疊、特別注意小螢幕（手機）或輔助工具上的表現